<template>
  <!--搜索-->
  <!--    搜索框-->
  <div style="padding: 10px 0">
    <el-input
      style="width: 200px"
      placeholder="请输入发布单位"
      clearable
      v-model="searchsource"
    ></el-input>
    <el-input
      style="width: 150px; margin-left: 15px"
      placeholder="请输入标题"
      clearable
      v-model="searchtitle"
    ></el-input>

    <el-button type="primary" style="margin-left: 15px" @click="getuserAll">
      <el-icon style="vertical-align: middle">
        <search />
      </el-icon>
      <span style="vertical-align: middle"> 搜索 </span>
    </el-button>
    <!-- 添加按钮 -->
    <el-button type="primary" style="margin-left: 15px" @click="addnotice">
      <el-icon style="margin-right: 5px"><CirclePlusFilled /></el-icon>
      添加
    </el-button>
  </div>
  <!--博客列表-->
  <el-table :data="tableData" style="width: 100%" height="500">
    <el-table-column fixed prop="id" label="序号" width="80" />
    <el-table-column prop="source" label="发布单位" width="380" />
    <el-table-column prop="noticetime" label="发布时间" width="180" />
    <el-table-column prop="title" label="标题" width="420" />

    <el-table-column fixed="right" label="操作" width="220">
      <template #default="scope">
        <el-button type="primary" size="small" @click="readnotice(scope.row)"
          >查看</el-button
        >
        <el-button type="warning" size="small" @click="noticeedit(scope.row)"
          >编辑</el-button
        >
        <el-button type="danger" size="small" @click="delnotice(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <div style="padding: 10px 0">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
  <!-- 查看的弹窗 -->
  <el-dialog v-model="dialogVisible" width="50%">
    <h2>{{ form.source }}</h2>
    <h4 style="text-align: right">{{ form.noticetime }}</h4>
    <h3 style="text-align: center">{{ form.title }}</h3>
    <br />
    <span>{{ form.content }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑或者添加的弹窗 -->
  <el-dialog title="用户信息" v-model="dialogFormVisible" width="50%">
    <el-form :model="form" size="default" :rules="rules" ref="form">
      <el-row>
        <el-col :span="8">
          <el-form-item label="序号" label-width="100px">
            <el-input
              v-model="form.id"
              autocomplete="off"
              disabled
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="发布单位" label-width="100px" prop="source">
            <el-input
              v-model="form.source"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="发布时间" label-width="100px" prop="noticetime">
            <el-date-picker
              v-model="form.noticetime"
              type="datetime"
              placeholder="选择日期和时间"
              :size="size" /></el-form-item></el-col
      ></el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="标题" label-width="100px" prop="title">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item> </el-col
      ></el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="内容" label-width="100px" prop="content">
            <el-input
              type="textarea"
              autosize
              v-model="form.content"
              autocomplete="off"
            ></el-input> </el-form-item></el-col
      ></el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消</el-button>
        <el-button type="primary" @click="saveData('form')"> 确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
  import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "Notice",
  data() {
    return {
      tableData: [],
      total: 0, //数据总条数
      pageNum: 1, //当前页
      pageSize: 10, //页大小
      searchsource: "", //搜索证号
      searchtitle: "", //搜索名称
      dialogFormVisible: false,
      dialogVisible: false,
      form: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        avatar: [
          { required: true, message: "请输入头像地址", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      //页大小改变
      this.pageSize = val;
      this.getuserAll();
    },
    handleCurrentChange(val) {
      //当前页改变
      this.pageNum = val;
      this.getuserAll();
    },
    //分页查询
    getuserAll() {
      this.$http
        .get("/inoculations/notice/pageall", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            source: this.searchsource,
            title: this.searchtitle,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.total = res.data.total;
            this.tableData = res.data.records;
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    //查看
    readnotice(row) {
      this.form = row;
      this.dialogVisible = true;
    },
    // 编辑
    noticeedit(row) {
      this.form = row;
      this.dialogFormVisible = true;
    },
    // 添加
    addnotice() {
      this.form = {};
      this.dialogFormVisible = true;
    },
    //用于数据的添加和更新
    saveData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http
            .post("/inoculations/notice/save", this.form)
            .then((res) => {
              if (res.statusCode == "200") {
                ElMessage({
                  message: "成功！",
                  type: "success",
                });
                this.dialogFormVisible = false;
                this.getuserAll();
              }
            })
            .catch(() => {
              ElMessage.error("失败！");
            });
        } else {
          ElMessage({
            message: "请填写！",
            type: "warning",
          });
          return false;
        }
      });
    },

    // 删除
    delnotice(id) {
      ElMessageBox.confirm("是否删除选中数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let token = localStorage.getItem("token");
          this.$http
            .delete("/inoculations/notice/del/" + id, token)
            .then((res) => {
              if (res.statusCode == "200") {
                ElMessage({
                  message: "删除成功！",
                  type: "success",
                });
                this.getuserAll();
              }
            })
            .catch(() => {
              ElMessage.error("删除失败！");
            });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消！",
          });
        });
    },
  },
  created() {
    this.getuserAll();
  },
};
</script>

<style scoped>
.el-button + span {
  margin-left: 10px;
}
</style>
